extends ../layout
block content
  .row.flashMessage.negative-30
    .col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3
      #flash-board.alert.fade.in(style='display: none;')
          button.close(type='button', data-dismiss='alert')
              span.ion-close-circled#flash-close
          #flash-content
  .container
    h2.text-center Update your email address here:
    form.form-horizontal.update-email(method='POST', action='/update-my-email', name="updateEmailForm")
      .row
        .col-sm-6.col-sm-offset-3
          input(type='hidden', name='_csrf', value=_csrf)
          .form-group
            input.input-lg.form-control(type='email', name='email', id='email', value=user.email || '', placeholder=user.email || 'Enter your new email', autofocus, required, autocomplete="off")
          .form-group
            button.btn.btn-lg.btn-primary.btn-block(type='submit')= !user.email || user.emailVerified ? 'Update my Email' : 'Verify Email'
            a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/signout')
              | Sign out

      script.
         $(document).ready(function() {
          $('form').submit(function(event){
            event.preventDefault();
            $('#flash-board').hide();
            var $form = $(event.target);
            $.ajax({
                type        : 'POST',
                url         : $form.attr('action'),
                data        : $form.serialize(),
                dataType    : 'json',
                encode      : true,
                xhrFields   : { withCredentials:  true }
            })
            .fail(error => {
              if (error.responseText){
                  var data = JSON.parse(error.responseText);
                  if(data.message)
                  $('#flash-content').html(data.message);
                  $('#flash-board')
                    .removeClass('alert-success')
                    .addClass('alert-info')
                    .fadeIn();
                }
            })
            .done(data =>{
              if(data && data.message){
                $('#flash-content').html(data.message);
                $('#flash-board')
                    .removeClass('alert-info')
                    .addClass('alert-success')
                    .fadeIn();
              }
            });
          });
         });
